<template>
        <div class="box" v-if="skeleton">
            <ul class="ul_" >
                <li v-for="item in comments" v-show="li" class="lis">
                  <div class="left_img">
                      <img :src="userUrl_(item.url)" alt="" class="imgs">
                  </div>
                   <div class="content" :class="{'global_font':$store.state.nowTime==='moon'}">
                       <p class="time" :class="{'global_font':$store.state.nowTime==='moon'}">{{times(item.time)}}</p>
                       <p class="bodys" v-html="item.content" :class="{'global_font':$store.state.nowTime==='moon'}"></p>
                   </div>
                </li>
            </ul>
            <span v-show="index>1" class="left_"   @click="left_"></span>
            <span v-show="index<c_length" class="right_"   @click="right_"></span>
        </div>
        <div v-else-if="comments===null" class="box circle_box" >
            <CircleLoading></CircleLoading>
        </div>
        <div v-else  class="trivia_noContent ">
            <h2 :class="{'global_font':$store.state.nowTime==='moon'}">暂无信息！</h2>
        </div>
<!--    <audio class="music" :src="file_m" autoplay="" controls="controls" preload="auto" loop="loop "></audio>-->
</template>

<script>
import api from "@/api";
import dayjs, {isDayjs} from "dayjs";
import CircleLoading from "@/components/PublicComponents/CircleLoading.vue";
export default {
    name: "BlessingMessage",
    components: {CircleLoading},
    props:['love','comments_length'],
    data(){
        return{
            userUrl:"",
            index:1,
            comments:null,
            li:true,
            timed:"",
            file_m : '/img/music/meigui.mp3',
            m:true,
            c_length:"",
            get:true,
            skeleton:false,
        }
    },
    watch: {
        love(newValue,oldValue){
            if(newValue.length>0){
                setTimeout(()=>{
                    this.skeleton = true;
                },100)
                this.comments = newValue;
            }else {
                this.comments=[];
            }
        },
        get(newValue,oldValue){
            setTimeout(()=>{
               this.get = true;
            },1500)
        },
        comments_length(newValue,oldValue){
            this.c_length = newValue
        }
    },
    methods: {
        music(){
            this.m = !this.m;
            let audioObj = document.querySelector(".music");
            if(this.m){
                audioObj.play()
            }else{
                audioObj.pause()
            }
        },
        times(time){
            return dayjs(time).format('YYYY-MM-DD')
        },
        userUrl_(url){
            return 'https://q1.qlogo.cn/g?b=qq&nk='+url+'&s=640';
        },
        left_(){
            if(this.get){
                this.get = false;
                this.index--;
                if(this.index<1){
                    this.index=1;
                    // alert("已到达第一页")
                    return
                }
                let box = document.querySelector(".ul_");
                box.style.display='none';
                box.style.transform = "scale(0)";
                box.style.display='block';
                setTimeout(()=>{
                    box.style.transform = "scale(1)";
                },300)
                api.loveGet( this.index).then((res)=>{
                    this.comments = null;
                    this.comments = res.data.data[0]
                    this.c_length = res.data.data[1]
                })

            }

        },
        right_(){
            if(this.get){
                this.get = false;
                this.index++;
                if(this.index > this.c_length){
                    // alert("已是最后一页")
                    this.index = this.c_length;
                    return
                }
                api.loveGet(this.index).then((res)=>{
                    this.comments = null;
                    this.comments  = res.data.data[0]
                    this.c_length = res.data.data[1]
                })
                let box = document.querySelector(".ul_");
                box.style.display='none';
                box.style.transform = "scale(0)";
                box.style.display='block';
                setTimeout(()=>{
                    box.style.transform = "scale(1)";
                },300)
            }

        },
    },
}
</script>

<style scoped>
.circle_box{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: 200px;
    border-radius:5px;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    background: rgba(246, 247, 248, 0.7);

}
  .box{
      display: flex;
      justify-content: center;
      width: 440px;
      margin: auto;
  }
  .box ul{
      width: 100%;
      min-height: 100px;
      max-height: 520px;
      list-style: none;
      transition: all .2s;
  }
  .box ul li{
      padding: 10px;
      display: flex;
      justify-items: center;
      margin-bottom: 15px;
      transition: all .5s;
      border-radius: 5px;
      box-shadow: 0 1px 1px 0 rgba(231, 228, 228, 0.2),  0 0 8px 2px rgb(196, 192, 192);
      animation: lis 1s ease-in-out 0s 1 forwards;
  }
  @keyframes lis {
      0%{
          transform: scale(0);
      }
      90%{
          transform: scale(1.05);
      }
      100%{
        transform: scale(1);
      }
  }
  .box ul li:hover{
      transform: translateY(-5%);
  }
  .imgs{
      margin-right: 15px;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      box-shadow: 0 1px 1px 0 rgba(236, 232, 232, 0.2),  0 0 8px 2px rgba(255, 255, 255) ;
  }
  .left_img{
      display: flex;
      height: 100%;

  }
  .content p{
      width: 100%;
      color: #8f8c8c;
  }
  .bodys{
      margin-top: 5px;
      font-size: 13px;
  }
  .time{
      font-size: 14px;
  }
  .left_,.right_{
          position: absolute;
          content: "";
          display: inline-block;
          width: 70px;
          height:70px;
          border-left: 5px solid #625b5b;
          border-bottom: 5px solid #625b5b;
          cursor: pointer;
          transform-origin: center;
          transition: all .1s;
  }
  .left_{
      left: -30%;
      top: 33%;
      animation: jiantou_l 1s linear 0s infinite forwards;
  }
  .right_{
      right: -30%;
      top: 33%;
      animation: jiantou_r 1s linear 0s infinite forwards;
  }
  @keyframes jiantou_l {
      0%{
        transform: scale(1) rotate(45deg);
      }
      60%{
          transform: scale(1.1) rotate(45deg);
      }
      100%{
          transform: scale(1) rotate(45deg);
      }
  }
  @keyframes jiantou_r {
      0%{
          transform: scale(1) rotate(220deg);
      }
      60%{
          transform: scale(1.1) rotate(220deg);
      }
      100%{
          transform: scale(1) rotate(220deg);
      }
  }
  .left_:hover,.right_:hover{
      border-left: 5px solid #8f8c8c;
      border-bottom: 5px solid #8f8c8c;
  }
  .music{
     opacity: 0;
  }
  #music{
      width: 50px;
      height: 50px;
      border-radius: 50%;
      transition: all .3s;
      cursor: pointer;
      background: white;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 13px;
  }
  #music:hover{
      opacity: .8;
  }
.trivia_noContent{
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #8f8c8c;
}
  @media (min-width:0px) and (max-width: 1000px) {
      .left_,.right_{
            right: 3%;
            top: -10%;
            width: 25px;
            height: 25px;
      }
      .left_{
          right: auto;
          left: 3%;
      }
  }
  @media (min-width:0px) and (max-width: 600px) {
     .box{
         width: 360px;
     }

  }
</style>